<template>
	<view class="center">
	<!-- 	<view class="tit"></view>
		<view class="title">
			<image src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>仓库选择</text>
			<view class="ima" @click="screen">
				<text>清除</text>
				<image src="@/static/images/tb_icon.png" mode="widthFix"></image>
			</view>
		</view> -->
		<hea-ders title='仓库选择'>
				<image slot="left" src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
				<text slot="official">清除</text>
		</hea-ders>
		
		<view class="bac">
			<view class="seach">
				<!-- <image src="../../../../static/images/search.png" mode="widthFix"></image> -->
				<input type="text" value="" placeholder-style="font-size:24rpx;" placeholder="编码/名称"/>
			</view>
				<uni-swipe-action-item class="red" :options="options" @click="onClick" @change="change">
			<view class="info">
				<text class="info_title">默认仓库 00001</text>
				<text class="info_order">地址：</text>
			</view>
			</uni-swipe-action-item >
				<uni-swipe-action-item class="red" :options="options" @click="onClick" @change="change">
				<view class="info">
					<text class="info_title">默认仓库 00001</text>
					<text class="info_order">地址：</text>
				</view>
				</uni-swipe-action-item >
		</view>
	</view>
</template>

<script>
		import heaDers from'@/pages/header/header.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components:{
			heaDers
		},
		data() {
			return {
				options: [ {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		methods: {
			onClick(e) {
				console.log('当前点击的是第' + e.index + '个按钮，点击内容是' + e.content.text)
			},
			change(open) {
				console.log('当前开启状态：' + open)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center{
		width: 100%;
		
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);
		.tit {
			width: 100%;
			height: 50rpx;
			box-sizing: border-box;
		}
		
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			image {
		
				width: 22rpx;
			}
		
			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}
		
			.ima {
				text {
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					line-height:33rpx;
					color:rgba(255,255,255,1);
					opacity:1;
				}
				image {
					width: 40rpx;
					margin-left: 2rpx;
				}
			}
		}
		.bac{
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			.seach {
				padding:10rpx 20rpx;
				input{
						width: 100%;
						height: 48rpx;
						background-color: rgba(245, 245, 245, 1) !important;
						border-radius: 32rpx;
						box-sizing: border-box;
						background: url(../../../../static/images/search.png)no-repeat;
						background-size: 5%;
						background-position: 2% 50%;
						padding-left:60rpx ;
				}
			}
			 .info {
				width: 100%;
				height: 88rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 10rpx 20rpx;
				border-bottom: 1rpx solid #e0e0e0;
				.info_title {
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:400;
					line-height:33rpx;
					color:rgba(97,97,97,1);
					opacity:1;
					margin-bottom: 10rpx;
				}
				.info_order {
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:400;
					line-height:28rpx;
					color:rgba(117,117,117,1);
					opacity:1;
				}
			}
		}
	}
</style>
